<template>
  <div class="auth">
    <top-header :showFun="showFun"></top-header>
    <div class="auth-content">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="权限设置">
          <a-button type="primary" style="margin-bottom: 16px;" @click="saveBtn" :disabled="isSaveBtn">权限保存</a-button>
          <a-row>
            <a-col :span="12">
              <!-- 全宗权限左边树 -->
              <p style="font-size:12px">全宗权限:</p>
              <tree :setting="setting1" :nodes="fondsTree" @onClick="fondsSelect" />
            </a-col>
            <a-col :span="12">
              <!-- 分类权限右边树 -->
              <p style="font-size:12px">分类权限:</p>
              <tree :setting="setting2" :nodes="treeData" @onCreated="handleCreated" @onCheck="treeCheck" />
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-select
          style="width: 120px"
          slot="tabBarExtraContent"
          @change="handleChange">
          <a-select-option
            v-for="(item, index) in userList"
            :key="index"
            :value="item.aU_Id">
            {{ item.aU_Name }}
          </a-select-option>
        </a-select>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import TopHeader from '@/components/TopHeader'
import { getUsersList, getFondsList, getTreeList, savePermission } from '@/request/api'
import tree from 'vue-giant-tree'
export default {
  name: 'Auth',
  components: {
    TopHeader,
    tree
  },
  data () {
    return {
      showFun: false,
      isSaveBtn: true,
      userData: JSON.parse(sessionStorage.getItem('USER_DATA')),
      userList: [],
      userId: null,
      fondsId: null,
      setting1: {
        check: {
          enable: false
        },
        data: {
          simpleData: {
            enable: true,
            idKey: 'qZ_Id',
            pIdKey: 'pId'
          },
          key: {
            name: 'qZ_Name'
          }
        },
        view: {
          showIcon: false
        }
      },
      fondsTree: [], // 全宗树
      treeData: [], // 分类树
      setting2: {
        check: {
          enable: true
        },
        data: {
          simpleData: {
            enable: true,
            idKey: 'id',
            pIdKey: 'pId'
          },
          key: {
            name: 'name'
          }
        },
        view: {
          showIcon: false
        }
      },
      ztreeObj: null,
      paramsData: []
    }
  },
  created () {
    this.getUsersData()
  },
  mounted () {},
  methods: {
    // 获取全部用户
    getUsersData () {
      const param = {
        id: this.userData.aU_Id
      }
      getUsersList(param).then(res => {
        this.userList = res.data.filter(item => {
          return item.aU_IsSystem === 0
        })
      })
    },
    // 切换用户获取全宗
    handleChange (value) {
      this.treeData = []
      this.userId = value
      this.getFondsData()
    },
    // 获取全宗数据
    getFondsData () {
      const param = { id: this.userData.aU_Id }
      getFondsList(param).then(res => {
        this.fondsTree = res.data
      })
    },
    // 全宗选择获取分类树
    fondsSelect (evt, id, treeNode) {
      this.isSaveBtn = false
      this.fondsId = treeNode.qZ_Id
      this.getTreeData(treeNode.qZ_Id)
    },
    // 获取分类树数据
    getTreeData (value) {
      const param = {
        id: this.userData.aU_Id,
        apU_Id: this.userId,
        qZ_Id: value,
        apU_IsPermission: 1
      }
      getTreeList(param).then(res => {
        res.data.forEach(item => {
          item['open'] = true
          if (item.isPermission === 1) {
            item['checked'] = true
          }
        })
        this.treeData = res.data
      })
    },
    handleCreated (ztreeObj) {
      this.ztreeObj = ztreeObj
      this.paramsData = this.ztreeObj.getCheckedNodes(true)
    },
    treeCheck (event, treeId, treeNode) {
      this.paramsData = this.ztreeObj.getCheckedNodes(true)
    },
    // 权限保存
    saveBtn () {
      const param = {
        id: this.userId,
        qZ_Id: this.fondsId,
        data: []
      }
      param.data = this.paramsData.map(item => {
        return {
          aU_Id: this.userId,
          aC_Id: item.id,
          aP_CreatorId: this.userData.aU_Id,
          aP_ModifierId: this.userData.aU_Id,
          qZ_Id: this.fondsId
        }
      })
      savePermission(param).then(res => {
        if (res.tag === 1) {
          this.$message.success('权限分配成功')
        } else {
          this.$message.error('权限保存失败')
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.auth {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  .auth-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    .ant-tabs {
      width: 100%;
      height: 100%;
      background: #FFF;
      padding: 0 20px;
    }
  }
}
</style>
